import React, { useCallback, useState } from "react";
import { BrowserRouter, } from 'react-router-dom'
import styled from 'styled-components';

import Router from '@/components/Router/Router';
import HeadBar from "@/components/HeadBar/HeadBar";
import {
    IconApps,
    IconBug,
    IconBulb,
    IconUser,
} from '@arco-design/web-react/icon';
import { Menu } from '@arco-design/web-react';

const MenuItem = Menu.Item;

const Wrapper = styled.div`
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
`;

const MenuWrapper = styled.div`
    position: relative;
    width: 100%;
    height: calc(100% - ${(isLogin) => isLogin ? 48 : 0 }px);
    display: flex;
    flex-direction: row;
    box-sizing: border-box;    

    .arco-menu {
        border-radius: 0px !important;
    }

    .arco-menu-dark .arco-menu-collapse-button {
        background-color: gray !important;
    }
`;

export interface IApp {
}

export const MenuKeys = {
    RealTimeMoniter: 'RealTimeMoniter',
    DeviceManage: 'DeviceManage',
    OrderManage: 'OrderManage',
    UserManage: 'UserManage',
    DataCather: 'DataCather',
    Abnormal: 'Abnormal',
}


const App = (_: IApp) => {

    const [ isLogin, setIsLogin ] = useState<boolean>(true);
    const [ menuItem, setMenuItem ] = useState<string>(localStorage.getItem('currentMenuItem') || MenuKeys.RealTimeMoniter)

    const menuCallBack = useCallback((menuKey) => {
        if (menuKey && MenuKeys[menuKey]) {
            setMenuItem(menuKey)
            localStorage.setItem('currentMenuItem', menuKey)
        }
    }, [])

    return (
        <BrowserRouter>
            <Wrapper>
                {
                    isLogin ? <HeadBar/> : ''
                }
                <MenuWrapper isLogin={isLogin}>
                    <Menu
                        style={{ width: 200, borderRadius: 4 }}
                        theme='dark'
                        defaultSelectedKeys={[menuItem]}
                        // hasCollapseButton
                        onClickMenuItem={menuCallBack}
                    >
                        <MenuItem
                            key={MenuKeys.RealTimeMoniter}
                        >
                            <IconApps /> 数据监测
                        </MenuItem>
                        <MenuItem
                            key={MenuKeys.UserManage}
                        >
                            <IconUser /> 用户管理
                        </MenuItem>
                        <MenuItem
                            key={MenuKeys.DeviceManage}
                        >
                            <IconBug /> 设备管理
                        </MenuItem>
                        <MenuItem
                            key={MenuKeys.OrderManage}
                        >
                            <IconBug /> 工单管理
                        </MenuItem>
                        <MenuItem
                            key={MenuKeys.DataCather}
                        >
                             <IconBulb /> 历史数据
                        </MenuItem>
                    </Menu>
                    <Router currentMenu={menuItem}/>
                </MenuWrapper>
            </Wrapper>
        </BrowserRouter>
    )
}


export default App;